<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="public/head"}
    <title>API系统</title>
    <style>
        .logo{color:#fff}
        .site-demo-body{padding: 0;}
        .layui-colla-content>.div-line{margin: 12px 2px;}
        .layui-colla-content .div-line-span{margin-left: 7px;}
        .request{color: #6971B7;margin-left: 10px;}
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header header header-demo">
        <div class="layui-main">
            <a class="logo" href=""><img src="/static/img/index/logo.png" alt=""></a>
            <ul class="layui-nav" lay-filter="user">
                {volist name="userList" id="vo"}
                <li class="layui-nav-item" data-name="{$vo.name}"><a href="javascript:void(0);">{$vo.name}</a></li>
                {/volist}
                <li class="layui-nav-item layui-this" data-name=""><a href="javascript:void(0);">全部</a></li>
            </ul>
        </div>
    </div>

<div class="layui-side layui-bg-black" >
    <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree site-demo-nav" id="nav"  lay-filter="nav">
        </ul>
    </div>
</div>
<div class="layui-tab layui-tab-brief">
    <div class="layui-body layui-tab-content site-demo site-demo-body">

        <div style="margin: 20px" id="timeline">
            <ul class="layui-timeline">
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">2018年4月</h3>
                        <p>看着一片祥和的世界，我感到深深的欣慰，因此写下一本绝学，希望它能够造福苍生：</p>
                        <ul>
                            <li>《PHP是世界上最好的语言》</li>
                        </ul>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">1945年8月</h3>
                        <p>
                            日本东京百米高空
                            <br>我凌空而坐 手抚键盘
                            <br>忽而沉思，忽而手指在键盘上弹跳不止
                            <br>一串串无形的字符洒向整个东京城
                            <br>万箭齐发
                            <br>当月中旬，日本宣布投降
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">公元前221年</h3>
                        <p>
                            我略施小计
                            <br>助秦始皇灭了六国，一统天下
                            <br>不料这个二逼，才活了几十年就死了
                            <br>我无语
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title">某年某月</h3>
                        <p>
                            我从沉睡中醒来
                            <br>看到这个兵荒马乱四分五裂的世界
                            <br>我常常在想，是不是应该做点什么，拯救这些无知的人类
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">混沌初开</div>
                    </div>
                </li>
            </ul>
        </div>
        <div>
            <div class="layui-collapse" lay-accordion id="collapse">
            </div>
        </div>
    </div>
</div>
</div>

</body>
<script>
    var activity_name = '';//当前选择姓名

    layui.use(['element','layer','code'], function(){
        var element = layui.element;
        var layer = layui.layer;
        groupRender();

        element.on('nav(user)', function(elem){
            activity_name = elem.data("name");
            groupRender(activity_name);
            $("#timeline").show();
            $("#collapse").hide();
        });

        element.on('nav(nav)', function(elem){
            let group_id = elem.find('a').data("group_id");
            if(!group_id){
                return false;
            }
            $.ajax({
                type:"post",
                url:"/index/index/getApiListByGroupId",
                data:{id:group_id,name:activity_name},
                success:function(data){
                    console.log(data);
                    if(data.code === 0){
                        $("#timeline").hide();
                        let h = '';
                        let c = data.data;
                        c.forEach(function(item,index){
                            h += '<div class="layui-colla-item">\n' +
                                '                    <h2 class="layui-colla-title">'+item.name+'</h2>\n' +
                                '                    <div class="layui-colla-content">\n' +
                                '                        <div style="margin: 5px 2px;">\n' +
                                '                            <span class="layui-badge-dot layui-bg-orange"></span>\n' +
                                '                            <span class="div-line-span">'+item.url+'</span>\n' +
                                '                        </div>\n' +
                                '                        <div class="div-line">\n' +
                                '                            <span class="layui-badge-dot layui-bg-orange"></span>\n' +
                                '                            <span class="div-line-span">'+item.name+'</span>\n' +
                                '                        </div>\n' +
                                '                        <div class="div-line" >\n' +
                                '                            <span class="layui-badge-dot layui-bg-orange"></span>\n' +
                                '                            <span class="div-line-span">请求方式</span><span class="request">'+item.request+'</span>\n' +
                                '                        </div>\n' +
                                '                        <div class="div-line" >\n' +
                                '                            <span class="layui-badge-dot layui-bg-orange"></span>\n' +
                                '                            <span style="margin-left: 7px;">请求参数</span>\n';

                            if(item.param.length > 0){
                                h += '                            <table class="layui-table" style="margin-left: 20px;">\n' +
                                    '                                <colgroup>\n' +
                                    '                                    <col width="150">\n' +
                                    '                                    <col width="150">\n' +
                                    '                                    <col width="150">\n' +
                                    '                                    <col>\n' +
                                    '                                </colgroup>\n' +
                                    '                                <thead>\n' +
                                    '                                <tr>\n' +
                                    '                                    <th>参数</th>\n' +
                                    '                                    <th>必须</th>\n' +
                                    '                                    <th>类型</th>\n' +
                                    '                                    <th>说明</th>\n' +
                                    '                                </tr>\n' +
                                    '                                </thead>\n' +
                                    '                                <tbody>\n';
                                let p = item.param;
                                p.forEach(function(v,k){
                                    h += '                                <tr>\n' +
                                        '                                    <td>'+v.param+'</td>\n' +
                                        '                                    <td>'+v.must+'</td>\n' +
                                        '                                    <td>'+v.filed_type+'</td>\n' +
                                        '                                    <td>'+v.explain+'</td>\n' +
                                        '                                </tr>\n';
                                });
                                h += '                                </tbody>\n' +
                                    '                            </table>\n';
                            }else{
                                h += '<span class="request">无</span>';
                            }

                            h += '                        </div>\n' +
                                '                        <div class="div-line" >\n' +
                                '                            <span class="layui-badge-dot layui-bg-gray"></span>\n' +
                                '                            <span class="div-line-span">'+item.param_explain+'</span>\n' +
                                '\n' +
                                '                        </div>\n' +
                                '                        <div class="div-line" >\n' +
                                '                        <pre class="layui-code">'+item.result_text+'</pre>\n' +
                                '                        </div>\n' +
                                '\n' +
                                '                        <div class="div-line" >\n' +
                                '                            <span class="layui-badge-dot layui-bg-orange"></span>\n' +
                                '                            <span class="div-line-span">返回字段说明</span>\n';

                            if(item.result.length > 0){
                                h += '                            <table class="layui-table" style="margin-left: 20px;">\n' +
                                    '                                <colgroup>\n' +
                                    '                                    <col width="150">\n' +
                                    '                                    <col width="150">\n' +
                                    '                                    <col>\n' +
                                    '                                </colgroup>\n' +
                                    '                                <thead>\n' +
                                    '                                <tr>\n' +
                                    '                                    <th>字段</th>\n' +
                                    '                                    <th>类型</th>\n' +
                                    '                                    <th>说明</th>\n' +
                                    '                                </tr>\n' +
                                    '                                </thead>\n' +
                                    '                                <tbody>\n';

                                let c = item.result;
                                c.forEach(function(v,k){
                                    h += '                                <tr>\n' +
                                        '                                    <td>'+v.param+'</td>\n' +
                                        '                                    <td>'+v.filed_type+'</td>\n' +
                                        '                                    <td>'+v.explain+'</td>\n' +
                                        '                                </tr>\n';
                                });

                                h += '                                </tbody>\n' +
                                    '                            </table>\n';
                            }else{
                                h += '<span class="request">无</span>';
                            }

                            h += '                        </div>\n' +
                                '\n' +
                                '                        <div class="div-line" >\n' +
                                '                            <span class="layui-badge-dot layui-bg-gray"></span>\n' +
                                '                            <span class="div-line-span">'+item.result_explain+'</span>\n' +
                                '                        </div>\n' +
                                '                    </div>\n' +
                                '                </div>';
                        });
                        $("#collapse").html(h).show();
                        element.render();
                        layui.code({
                            title: '返回结果示例',
                            about: false
                        });
                    }else{
                        layer.msg(data.msg,{icon:5});
                    }
                }
            });
        });

        function groupRender($name)
        {
            $.ajax({
                type:'POST',
                url:'/index/index/getGroupList',
                data:{name:$name},
                success:function(data){
                    if(data.code === 0){
                        let h = '';
                        let c = data.data;
                        c.forEach(function(item,index){
                            h += '<li class="layui-nav-item"><a href="javascript:void(0)" data-group_id="'+item.id+'" >'+item.name+'</a></li>'
                        });
                        $("#nav").html(h);
                        element.render('nav');
                    }
                    return false;
                }
            });
        }
    });

</script>
</html>